<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
<template>
  <div class="taskItemApprover">
    <div class="taskItemApprover_title">
      <div class="taskItemApprover_title_return" @click="ReturnsHistory">
        <img src="@/pages/mobile/assets/img/Back@3x.png" alt />
        <!-- <span>{{title}}</span> -->
      </div>
      <p v-if="approverState.state">确认同意</p>
      <p v-else>确认驳回</p>
    </div>

    <div class="content_box consent" v-if="approverState.state">
      <scroll class="content_box_scroll">
        <div class="taskItemApprover_content" ref="taskItemApprover_content">
          <textarea
            placeholder="请输入审批意见"
            v-model="opinionTags.opinionText"
            name="textarea"
            id="textarea"
          ></textarea>
        </div>
        <div class="content_consent" v-if="consentList.length">
          <div class="content_consent_title">
            <x-icon type="ios-star" size="10"></x-icon>
            <span>选择执行人</span>
          </div>
          <checklist
            label-position="left"
            :options="consentList"
            v-model="consentListOK"
            @on-change="consentChange"
          ></checklist>
        </div>
      </scroll>
    </div>

    <div class="content_box reject" v-else>
      <div class="taskItemApprover_content" ref="taskItemApprover_content">
        <textarea
          class="textarea_reject"
          placeholder="请输入审批意见"
          v-model="opinionTags.opinionText"
          name="textarea"
          id="textarea"
        ></textarea>
      </div>

      <div class="content_reject">
        <group label-align="right" class="reject_group">
          <div class="reject_item reject_item_top">
            <div class="reject_group_sign">
              <x-icon type="ios-star" size="10"></x-icon>
            </div>
            <popup-picker
              class="reject_group_select"
              @on-change="PyRejectChange"
              title="被驳回岗位"
              :data="PyReject"
              placeholder="请选择"
              show-name
              v-model="qcListData.AssetsNature"
              value-text-align="left"
            ></popup-picker>
          </div>
          <div class="reject_item">
            <div class="reject_group_sign">
              <x-icon type="ios-star" size="10"></x-icon>
            </div>
            <popup-picker
              class="reject_group_select reject_group_select_border"
              title="提交流程"
              :data="Type"
              @on-change="TypeChange"
              placeholder="请选择"
              show-name
              v-model="qcListData.AssetsNature1"
              value-text-align="left"
            ></popup-picker>
          </div>
          <div
            class="reject_item"
            v-show="
              Submit[0].length && opinionTags.commitMode == 'point_to_point'
            "
          >
            <div class="reject_group_sign">
              <x-icon type="ios-star" size="10"></x-icon>
            </div>
            <popup-picker
              class="reject_group_select"
              title="提交岗位"
              :data="Submit"
              @on-change="SubmitChange"
              placeholder="请选择"
              show-name
              v-model="qcListData.AssetsNature2"
              value-text-align="left"
            ></popup-picker>
          </div>
        </group>
      </div>
    </div>

    <div class="taskItemApprover_button">
      <div v-if="approverState.state == 1" class="button_box">
        <button v-if="consentState" class="dissatisfy">确认同意</button>
        <button v-else @click="taskItemApproverY">确认同意</button>
      </div>

      <div v-else class="button_box">
        <button v-if="!rejectState" class="dissatisfy">确认驳回</button>
        <button v-else @click="taskItemApproverN">确认驳回</button>
      </div>
    </div>

    <toast
      v-model="PositionValue"
      type="text"
      :time="showPositionValuetime"
      is-show-mask
      :text="showPositionValuetext"
      :position="position"
    ></toast>
  </div>
</template>

<script>
import '@/pages/mobile/assets/css/selectStyle.less'
import Scroll from "@/pages/mobile/assets/js/JoysScroll/JoysScroll";
import { Datetime, PopupPicker, Group, Cell, Picker, XButton, Divider, XSwitch, Checklist, Toast } from 'vux'
export default {
  name: '',
  components: {
    PopupPicker,
    Group,
    Picker,
    XButton,
    Divider,
    Cell,
    XSwitch,
    Datetime,
    Checklist,
    Scroll,
    Toast
  },
  data () {
    return {
      consentList: [], //可执行人
      consentListOK: [], //选择可执行人
      consentState: false, // 同意按钮状态
      rejectState: false, // 驳回按钮状态
      PyRejectSum: [[]],  // 我们一起
      PyReject: [[{ hiActId: "1", name: "1", userId: "1", value: "1" }]], // 被驳回岗位
      Type: [[{ name: '点对点', value: 'point_to_point' }, { name: '原流程', value: 'original_process' }]], // 类型
      Submit: [[{ hiActId: "1", name: "1", userId: "1", value: "1" }]], // 提交岗位
      qcListData: {},  //选择参数
      PositionValue: false, // 图片识别失败信息提示信息提示
      position: "default", //弹框
      showPositionValuetime: 3000, //弹框显示时间
      showPositionValuetext: "", // 弹框提示信息
      // opinionTags:{} // 意见
    }
  },
  // props: ["childDataType"],
  props: ["approverState", "opinionTags"],
  watch: {
    // 监听参数
    consentList () {
      if (this.approverState.state) {
        this.setHeight()
      }
    }
  },
  methods: {
    // 设置高度
    setHeight () {
      var eleHeight = parseFloat(
        document.getElementsByTagName("html")[0].offsetHeight
      );
      var styleHeight = eleHeight * 0.55
      this.$refs.taskItemApprover_content.style.height = styleHeight + "px";
      if (this.consentList.length == 0) {
        this.$refs.taskItemApprover_content.style.height = eleHeight + "px";
      }
    },
    // 关闭本组件
    ReturnsHistory () {
      this.$emit('ApproverChild')
    },
    // 信息提示
    Position (position) {
      this.position = position;
      this.PositionValue = true;
    },
    // 修改审批人
    consentChange (val) {
      this.opinionTags.userIds = this.consentListOK
      if (this.consentListOK.length) {
        this.consentState = false
      } else {
        this.consentState = true
      }
    },
    // 被驳回岗位选值
    PyRejectChange (val) {
      this.Submit = [[]]
      for (let index = 0; index < this.PyRejectSum[0].length; index++) {
        if (index > Number(val[0])) {
          this.Submit[0].push(this.PyRejectSum[0][index])
        }
      }

      for (const key in this.Submit[0]) {
        this.Submit[0][key].value = String(Number(key) + 1)
      }
      this.opinionTags.rejActId = this.PyReject[0][Number(val[0])].hiActId
      this.opinionTags.rejUserId = this.PyReject[0][Number(val[0])].userId
    },
    // 提交流程
    TypeChange (val) {
      this.opinionTags.commitMode = val[0]
      if (this.opinionTags.commitMode == 'original_process' && this.opinionTags.rejActId) {
        this.rejectState = true
      }
    },
    // 提交岗位
    SubmitChange (val) {
      var index = Number(val[0]) - 1
      this.opinionTags.targetActId = this.Submit[0][index].hiActId
      this.opinionTags.targetUserId = this.Submit[0][index].userId
      if (this.opinionTags.commitMode == 'point_to_point' && this.opinionTags.rejActId) {
        this.rejectState = true
      }
    },
    // 驳回信息
    taskItemQueryRejectList (busiId, taskId) {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-bpm/approvals/runAct/" + taskId,
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
      })
        .then(res => {
          this.PyReject = [[]]
          for (const key in res.data.actHis) {
            this.PyReject[0].push({
              name: res.data.actHis[key].hiActName + "  （" + res.data.actHis[key].userName + ")",
              value: key,
              hiActId: res.data.actHis[key].hiActId,
              userId: res.data.actHis[key].userId,
            });
          }
          for (const key in res.data.actHis) {
            this.PyRejectSum[0].push({
              name: res.data.actHis[key].hiActName + "  （" + res.data.actHis[key].userName + ")",
              hiActId: res.data.actHis[key].hiActId,
              userId: res.data.actHis[key].userId,
            });
          }
          this.PyRejectSum[0].push({
            name: res.data.runActName + "  （" + res.data.userName + ")",
            hiActId: res.data.runActId,
            userId: res.data.userId,
          })
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 同意审批人列表
    taskItemQueryConsentList (busiId, taskId) {
      this.$axios({
        method: "get",
        url: "/joys-rest/joys-bpm/approvals/" + taskId,
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        params: {
          busiId: busiId
        }
      })
        .then(res => {
          for (const k in res.data[0].userList) {
            this.consentList.push({
              key: res.data[0].userList[k].userId,
              value: res.data[0].userList[k].userName
            })

          }
          if (this.consentList.length > 0) {
            this.consentState = true
          } else {
            this.consentState = false
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 同意提交
    taskItemApproverY () {
      this.opinionTags.result = 'AGREE'
      this.$axios({
        method: "post",
        url: "/joys-rest/joys-bpm/approvals/approve",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },
        data: this.opinionTags
      })
        .then(res => {
          this.Position("middle");
          this.showPositionValuetext = "同意成功"
          setTimeout(() => {
            this.$emit('ApproverChild')
            this.$router.goBack();
          }, 500);
        })
        .catch(error => {
          console.log(error);
        });

    },
    // 驳回提交
    taskItemApproverN () {

      this.opinionTags.result = 'DISAGREE'
      this.$axios({
        method: "post",
        url: "/joys-rest/joys-bpm//approvals/reject",
        headers: {
          "AUTH-TOKEN": localStorage.getItem("AUTH-TOKEN")
        },

        params: {
          taskId: this.approverState.taskId
        },
        data: this.opinionTags
      })
        .then(res => {
          this.Position("middle");
          this.showPositionValuetext = "驳回成功"
          setTimeout(() => {
            this.$emit('ApproverChild')
            this.$router.goBack();
          }, 500);

        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted () {
    this.setHeight()
    this.taskItemQueryConsentList(this.approverState.busiId, this.approverState.taskId) //查询同意提交可选人员
    this.taskItemQueryRejectList(this.approverState.busiId, this.approverState.taskId) //查询驳回提交可选人员
  },
  created () {
  }
}
</script>

<style lang='less' scoped>
.taskItemApprover {
  background: #fbf9fe;
  position: fixed;
  top: 0rem;
  bottom: 0.1rem;
  width: 100%;
  height: 100%;
  z-index: 501;
  overflow: hidden;
  .taskItemApprover_title {
    width: 100%;
    height: 0.44rem;
    text-align: center;
    line-height: 0.44rem;
    z-index: 501;
    position: fixed;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    .taskItemApprover_title_return {
      float: left;
      height: 0.44rem;
      line-height: 0.44rem;
      img {
        // width: 0.15rem;
        float: left;
        height: 0.205rem;
        padding-left: 0.085rem;
        vertical-align: baseline;
        margin-top: 0.12rem;
      }
      span {
        float: left;
        font-family: Regular;
        font-size: 0.17rem;
        color: #3e3e3e;
        letter-spacing: -0.41px;
        margin-left: 0.04rem;
        overflow: hidden;
        height: 0.44rem;
      }
    }
    p {
      font-family: Semibold;
      font-size: 0.17rem;
      color: #3e3e3e;
      letter-spacing: -0.41px;
      text-align: center;
      height: 0.44rem;
      line-height: 0.44rem;
      margin-left: 1.1rem;
      margin-right: 1.1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .content_box {
    height: 100%;
    .taskItemApprover_content {
      textarea {
        padding: 10px 4%;
        height: 80%;
        width: 92%;
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: rgba(0, 22, 22, 0.85);
        letter-spacing: 0;
        margin-bottom: -76px;
      }
      textarea::placeholder {
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #818181;
        letter-spacing: 0;
      }
      .textarea_reject {
        padding-top: 50px;
      }
    }
    .content_reject {
      height: 146px;
      width: 100%;
      position: absolute;
      bottom: 16%;
      background: #fbf9fe;
      .reject_item {
        height: 42px;
        background: #fff;
        .reject_group_sign {
          height: 0.4rem;
          width: 0.16rem;
          // background: red;
          display: flex;
          align-items: center;
          justify-content: center;
          float: left;
          .vux-x-icon {
            fill: #f70968;
          }
        }
        .reject_group_time {
          border-bottom: 0.5px solid #e6e6e6;
        }

        .reject_group_select_border {
          margin-left: 0.16rem;
          border-bottom: 1px solid #f6f6f6;
        }
      }
      .reject_item_top {
        margin: 10px 0;
      }
    }
    .content_consent {
      min-width: 300px;
      .content_consent_title {
        height: 0.33rem;
        padding-left: 7px;
        .vux-x-icon {
          fill: #f70968;
        }
        span {
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: #706967;
          letter-spacing: 0;
        }
      }
    }
  }
  .consent {
    .taskItemApprover_content::before {
      content: "";
      height: 0.44rem;
      display: block;
      background: #fbf9fe;
    }
    .content_consent::after {
      content: "";
      height: 0.76rem;
      display: block;
      background: #fbf9fe;
    }
  }

  .taskItemApprover_button {
    position: absolute;
    bottom: 0px;
    height: 0.76rem;
    width: 100%;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .button_box {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      button {
        width: 91%;
        height: 0.44rem;
        background: #be9457;
        border-radius: 4px;
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #ffffff;
        letter-spacing: 0;
      }
      .dissatisfy {
        opacity: 0.5;
      }
    }
  }
}
</style>
<style scoped>
.consent
  /deep/
  .weui-cells_checkbox
  .weui-check:checked
  + .weui-icon-checked:before {
  color: #be9457;
}
</style>